<template>

	<view :style="[AppSkinVar]">
		<view class="bg-white sticky-box">
			<view class="search-input ">
				<e-search height="30" :show-action="false" :search-icon-color="AppSkin.primary"
					:placeholder="$t('layout.请输入关键词')" v-model="_keyword" @search="reset"></e-search>
			</view>
			<filter-card :list="filterList" filterType="1" @filter="filterGoods"></filter-card>
		</view>
		<empty :text="$t('classify.暂无内容')" :icon="$staticPath('default_img.png')" v-if="emptyShow"></empty>
		<view class="goods-list" v-if="!isGoodsEmpty">
			<goods-list :leftGoodsList="leftGoodsList" :rightGoodsList="rightGoodsList"
				v-show="listType == 1"></goods-list>
			<load-more :showLoad="goodsShowLoad" v-show="listType == 1"></load-more>
		</view>
		<view class="store-list" v-if="!isStoreEmpty">
			<store-list :list="storeRows" 
				v-show="listType == 2"></store-list>
				<load-more :showLoad="storeShowLoad" v-show="listType == 2"></load-more>
		</view>
		


	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import { getGoodsList, getStoreList } from '@/common/request/api'
	import {
		useCurrentInstance,
		useWaterfallsPage,
		useQueryPage
	} from '@/common/hooks'
	import storeList from './child/store-list.vue'
	import {
		onReachBottom
	} from '@dcloudio/uni-app'

	const props = defineProps<{
		keyword ?: string
		couponShareCode ?: string
		categoryId ?: string
		subareaId ?: string
	}>()

	const ctx = useCurrentInstance()

	const _keyword = ref(props.keyword || '')
	const orderByColumn = ref<string>('')
	const isAsc = ref<string>('')
	const listType = ref(1)


	const filterList = [
			{
				text: 'common.综合',
				key: 'null'
			},
			{
				text: 'common.销量',
				key: 'stockSold',
				isSort: true,
				sort: ''
			},
			// #ifndef PRIVATE
			{
				text: 'common.店铺',
				key: 'store'
			},
			// #endif
			{
				text: 'common.价格',
				key: 'price',
				isSort: true,
				sort: ''
			}

		]

	const requestParams = computed(() => {
		return {
			orderByColumn: isAsc.value ? orderByColumn.value : null,
			isAsc: isAsc.value,
			name: _keyword.value,
			subareaIds: props.subareaId,
			classifyIds: props.categoryId,
		}
	})

	const {
		showLoad: goodsShowLoad,
		leftList: leftGoodsList,
		rightList: rightGoodsList,
		isEmpty: isGoodsEmpty,
		handleQueryPage: getGoodsData,
		handleRefresh: handleRefreshGoods
	} = useWaterfallsPage({
		api: getGoodsList,
		option: {
			params: requestParams
		}
	})
	const storeRequestParams = computed(() => {
		return {
			name: _keyword.value,
		}
	})
	const {
		showLoad: storeShowLoad,
		isEmpty: isStoreEmpty,
		list: storeRows,
		handleQueryPage: getStoreData,
		handleRefresh: handleRefreshStore
	} = useQueryPage({
		api: getStoreList,
		option: {
			params: storeRequestParams
		}
	})

	const emptyShow = computed(() => {
		return listType.value === 1 ? isGoodsEmpty.value : isStoreEmpty.value
	})

	const reset = () => {
		if (listType.value == 1) {
			handleRefreshGoods()
		} else {
			handleRefreshStore()
		}
	}

	const filterGoods = (data : {
		text : string,
		key : string,
		isSort ?: boolean,
		sort ?: string
	}) => {
		if (data.key === 'null') {
			orderByColumn.value = ''
			listType.value = 1
		} else {
			if (data.key === 'store') {
				listType.value = 2
			} else {
				orderByColumn.value = data.key
				listType.value = 1
			}

		}
		isAsc.value = data?.sort || 'asc'
		reset()
	}

	getGoodsData()
	
	onReachBottom(()=> {
		if (listType.value == 1) {
			getGoodsData()
		} else {
			getStoreData()
		}
	})
</script>
<style>
	page {
		background-color: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.search-input {
		padding: 30rpx 20rpx;
	}
	.keyword {
		padding: 0 30rpx;
		.title {
			padding: 24rpx 0;
		}
		.keyword-text {
			padding: 10rpx 20rpx;
			background: #f9f9fb;
			border-radius: 36rpx;
		}
	}
	.store-list,
	.goods-list {
		
	}
	.goods-list {
		background-color: #f7f7f7;
	}
	.sticky-box {
		position: sticky;
		top: 0;
		background-color: #ffffff;
		z-index: 999;
	}
</style>